<template>
	<div class="table-content">
		<div class="label">今日盈亏TOP3</div>
		<el-table
			key="father"
			ref="elTable"
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			class="small-size-table"
			:data="tableData"
			style="width: 100%"
			:max-height="480"
			highlight-current-row
			:header-cell-style="getRowClass"
			:span-method="objectSpanMethod"
		>
			<el-table-column
				prop="label"
				align="center"
				label="类别"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.label || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="memberRank"
				align="center"
				label="序号"
				min-width="80"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.memberRank || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="memberName"
				align="center"
				label="会员账号"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.memberName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="topProxyName"
				align="center"
				label="总代账号"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.topProxyName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="creditQuota"
				align="center"
				label="授信额度"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{ handleTotalNumber('USDT', scope.row.creditQuota) }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="loanAmount"
				align="center"
				label="借款金额"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{ handleTotalNumber('USDT', scope.row.loanAmount) }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="venueName"
				align="center"
				label="游戏场馆"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.venueName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="validBetAmount"
				align="center"
				label="有效投注"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{
							handleTotalNumber('USDT', scope.row.validBetAmount)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="maxBetAmount"
				align="center"
				label="单笔最大投注"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{ handleTotalNumber('USDT', scope.row.maxBetAmount) }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="hisRebateAmount"
				align="center"
				label="历史返水"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{
							handleTotalNumber('USDT', scope.row.hisRebateAmount)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="netAmount"
				align="center"
				label="投注盈亏"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p :style="handleNumberColor(scope.row.netAmount)">
						{{
							handleTotalNumber(
								'USDT',
								scope.row.netAmount,
								0,
								true,
								true
							)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="hisNetAmount"
				align="center"
				label="历史输赢"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p :style="handleNumberColor(scope.row.hisNetAmount)">
						{{
							handleTotalNumber(
								'USDT',
								scope.row.hisNetAmount,
								0,
								true,
								true
							)
						}}
					</p>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import dayjs from 'dayjs'
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		merchantId: {
			type: String,
			default: null
		},
		dateValue: {
			type: Object,
			default: null
		}
	},
	data() {
		return {
			todayProfit: [],
			tableData: [],
			tableData1: []
		}
	},
	mounted() {},
	methods: {
		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
			if (columnIndex === 0) {
				if (rowIndex % 3 === 0) {
					return {
						rowspan: 3,
						colspan: 1
					}
				} else {
					return {
						rowspan: 0,
						colspan: 0
					}
				}
			}
		},
		getRowClass({ row, column, rowIndex, columnIndex }) {
			if (rowIndex === 0 && this.headerStyle !== 2) {
				return 'background:#EFEFEF'
			} else {
				return ''
			}
		},
		loadData() {
			const params = {
				...this.queryData,
				reportStDate: dayjs(this.dateValue)
					.startOf('day')
					.format('YYYYMMDD'),
				reportEdDate: dayjs(this.dateValue)
					.endOf('day')
					.format('YYYYMMDD'),
				merchantId: this.merchantId,
				top: 3,
				netType: 1
			}
			if (!params.merchantId) {
				delete params.merchantId
			}
			this.tableData = []
			this.loading = true
			this.$api
				.getMemberAndLossRankingPage(params)
				.then((res) => {
					this.loading = false
					this.tableData1 = res?.data?.record || []
					this.loadData1()
				})
				.catch(() => {
					this.loading = false
				})
		},
		loadData1() {
			const params = {
				...this.queryData,
				reportStDate: dayjs(this.dateValue)
					.startOf('day')
					.format('YYYYMMDD'),
				reportEdDate: dayjs(this.dateValue)
					.endOf('day')
					.format('YYYYMMDD'),
				merchantId: this.merchantId,
				top: 3,
				netType: 2
			}
			if (!params.merchantId) {
				delete params.merchantId
			}
			this.tableData = []
			this.loading = true
			this.$api
				.getMemberAndLossRankingPage(params)
				.then((res) => {
					this.loading = false
					this.tableData = [...this.tableData1, ...res?.data?.record]
					for (const index in this.tableData) {
						if (index < 3) {
							this.tableData[index].label = '今日盈利最高'
						} else {
							this.tableData[index].label = '今日亏损最高'
						}
					}
				})
				.catch(() => {
					this.loading = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.table-content {
	width: 100%;
	margin-top: 20px;
	.label {
		text-align: center;
		font-size: 26px;
		font-weight: bold;
		padding-left: 10px;
		margin-bottom: 20px;
	}
}
</style>
